<template>
  <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "SankeyEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "桑基能量平衡图",
          type: "sankey",
          data: [
            { name: "输入1" },
            { name: "输入2" },
            { name: "中间层" },
            { name: "输出1" },
            { name: "输出2" },
            { name: "输出3" },
          ],
          // 输入和输出的value之和不需要完全相等
          links: [
            { source: "输入1", target: "中间层", value: 10 },
            { source: "输入2", target: "中间层", value: 2 },
            { source: "输入2", target: "输出1", value: 6 },
            { source: "中间层", target: "输出2", value: 8 },
            { source: "中间层", target: "输出3", value: 2 },
          ],
        },
      ];

      return {
        title: {
          text: "能量分流图",
          subtext: "桑基图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br />{b}: {c}%",
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
